import React,{Component, useContext} from 'react'

/**
 * 用索引做key值
 * 
 * li input y 2  key=0
 * li input y 1
 * 
 * li input y 3  key=0
 * li input y 2
 * li input 1
 */
/**
 * 用第一无二值做key值
 * li input y 2 key=b
 * li input y 1 key=a
 * 
 * li input y 3 key=c
 * li input y 2 key=b
 * li input y 1 key=a
 */
//! 逆序添加还有删除的时候，不能用索引值做key值
//! 正序没有问题
//! 在有输入类 DOM节点时候，key值一定要用对了   
export const List = ({list}) => {
    // console.log('list ren-render')
    return (
            <ul>
                {
                    list.map((item, index) => <li key={index}>
                        <input type="checkbox"/>
                        {item}--
                        <button>删除</button>
                    </li>)
                    // list.map((item) => <li key={item}>
                    //     <input type="checkbox"/>
                    //     {item}--
                    //     <button>删除</button>
                    // </li>)
                }
            </ul>

    )
}
